<template>
    <div>
      <el-form :inline="true" :model="searchForm">
        <el-form-item style="float: right">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            @click="addEnv"
            >新增环境变量</el-button
          >
        </el-form-item>
      </el-form>
      <!-- 简化的表格 -->
      <el-table size="small" :data="paramList" v-loading="loading">
        <el-table-column label="序号" type="index" width="50px" align="center" />
        <el-table-column label="参数名" prop="name" />
        <el-table-column label="参数类型" prop="dataType" />
        <el-table-column label="参数值" prop="paramData" min-width="150px" />
        <el-table-column label="环境" prop="environment" min-width="150px" />
        <el-table-column label="描述" prop="description" min-width="150px" />
        <el-table-column
          fixed="right"
          align="operation"
          label="操作"
          width="120px"
        >
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="deleteData(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 新增环境变量弹窗 -->
      <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
        <el-form :model="environmentForm" label-width="100px">
          <el-form-item label="参数名">
            <el-input
              v-model="environmentForm.name"
              placeholder="请输入参数名"
            ></el-input>
          </el-form-item>
          <el-form-item label="参数类型">
            <el-select
              v-model="environmentForm.dataType"
              placeholder="请选择参数类型"
            >
              <el-option label="method" value="method"></el-option>
              <el-option label="string" value="string"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="参数值">
            <el-input
              v-model="environmentForm.paramData"
              placeholder="请输入参数值"
            ></el-input>
          </el-form-item>
          <el-form-item label="环境">
            <el-input
              v-model="environmentForm.environment"
              placeholder="请输入环境"
            ></el-input>
          </el-form-item>
          <el-form-item label="描述">
            <el-input
              v-model="environmentForm.description"
              placeholder="请输入描述"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { timestampToTime } from "@/utils/util";
  
  export default {
    data() {
      return {
        loading: false,
        currentPage: 1,
        pageSize: 10,
        total: 0,
        userList: [],
        paramList: [],
        searchForm: {},
        dialogVisible: false,
        dialogTitle: "新增环境变量",
        environmentForm: {
          name: "",
          dataType: "",
          paramData: "",
          environment: "",
          description: "",
          projectId: ""
        },
      };
    },
    created() {
      this.fetchData();
    },
    methods: {
      fetchData() {
        this.loading = true;
        const url =
          "/nore/autotest/environmentParam/list/" +
          this.currentPage +
          "/" +
          this.pageSize;
        const param = {
          condition: "",
          projectId: this.$store.state.projectId,
        };
        this.$post(url, param, (response) => {
          let data = response.data;
          // for (let i = 0; i < data.list.length; i++) {
          //   data.list[i].index = (this.currentPage - 1) * this.pageSize + i + 1;
          //   data.list[i].updateTime = timestampToTime(data.list[i].updateTime);
          // }
          this.paramList = data.list;
  
          console.log(data);
  
          this.userList = data.list;
          this.total = data.total;
          this.loading = false;
        });
      },
      deleteData(row) {
        const url = "/nore/autotest/environmentParam/delete";
        this.$confirm("确定要删除吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.$post(url, { id: row.id }, (response) => {
            this.$message.success("删除成功");
            this.fetchData(); // 刷新数据
          });
        });
      },
      // 新增环境变量
      addEnv() {
        this.dialogTitle = "新增环境变量";
        this.environmentForm = {
          name: "",
          dataType: "",
          paramData: "",
          environment: "",
          projectId: this.$store.state.projectId,
          description: "",
        };
        this.dialogVisible = true;
      },
      submitForm() {
        const url = "/nore/autotest/environmentParam/save";
        this.$post(url, this.environmentForm, (response) => {
          this.$message.success("添加成功");
          this.dialogVisible = false;
          this.fetchData(); // 刷新数据
        });
      },
    },
  };
  </script>
  
  <style scoped>
  /* 样式可以根据需要进行调整 */
  </style>
  